<template>
  <el-row>
    <el-col :span="11">
      <el-card>
        <div class="header">
          <span>修改密码</span>
        </div>
        <el-form label-width="20%" style="width: 400px">
          <el-form-item label="旧密码">
            <el-input type="password" v-model="info.oldPassword" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input type="password" v-model="info.newPassword" placeholder="请输入新密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input type="password" v-model="info.confirmPassword" placeholder="请再次输入新密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updatePassword" style="margin-left: 100px">确认修改</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="1">
    </el-col>
    <el-col :span="12">
      <el-card>
        <div class="header">
          <span>修改支付密码</span>
        </div>
        <el-form label-width="30%" style="width: 400px">
          <el-form-item label="登录密码">
            <el-input type="password" v-model="info.loginPassword" placeholder="请输入登录密码"></el-input>
          </el-form-item>
          <el-form-item label="新支付密码">
            <el-input type="password" v-model="info.newPayPassword" placeholder="请输入新的支付密码"></el-input>
          </el-form-item>
          <el-form-item label="确认支付密码">
            <el-input type="password" v-model="info.confirmPayPassword" placeholder="请再次输入新的支付密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updatePayPassword" style="margin-left: 100px">确认修改</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import {ref} from "vue";
import UserApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";

const info = ref({});
//修改密码
function updatePassword() {
  UserApi.updatePassword(info.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          info.value = {};
        } else {
          ElMessage.error(resp.msg)
        }
      })
}
//修改支付密码
function updatePayPassword() {
  UserApi.updatePayPassword(info.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          info.value = {};
        } else {
          ElMessage.error(resp.msg)
        }
      })
}
</script>

<style scoped>
.header {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  margin-left: 20px;
}
</style>